<template>
  <div class="match-statistics-panel">
    <el-row :gutter="20">
      <el-col v-for="(stat, index) in statistics" :key="index" :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
          <div class="stat-icon">
            <el-icon>
              <component :is="stat.icon"></component>
            </el-icon>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="24">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>匹配结果趋势</span>
            </div>
          </template>
          <div id="match-trend-chart" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import {Connection, Document, Promotion, Warning} from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import {getMatchStatistics, getMatchTrend} from '@/api/match';
import {ElMessage} from 'element-plus';

// 统计数据
const statistics = ref([
  {label: '总匹配数', value: 0, icon: Document},
  {label: '匹配成功', value: 0, icon: Connection},
  {label: '部分匹配', value: 0, icon: Promotion},
  {label: '匹配异常', value: 0, icon: Warning}
]);

// 图表实例
let trendChart: echarts.ECharts | null = null;

// 加载统计数据
const loadStatistics = async () => {
  try {
    const res = await getMatchStatistics();
    if (res.code === 200 && res.data) {
      statistics.value[0].value = res.data.totalCount || 0;
      statistics.value[1].value = res.data.successCount || 0;
      statistics.value[2].value = res.data.partialCount || 0;
      statistics.value[3].value = res.data.exceptionCount || 0;
    }
  } catch (error) {
    console.error('加载匹配统计数据失败', error);
    ElMessage.error('加载匹配统计数据失败');
  }
};

// 初始化趋势图表
const initTrendChart = async () => {
  const chartDom = document.getElementById('match-trend-chart');
  if (!chartDom) return;

  trendChart = echarts.init(chartDom);

  try {
    const res = await getMatchTrend();
    if (res.code === 200 && res.data) {
      const months = res.data.map((item: any) => item.month);
      const successData = res.data.map((item: any) => item.successCount);
      const partialData = res.data.map((item: any) => item.partialCount);
      const exceptionData = res.data.map((item: any) => item.exceptionCount);

      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['匹配成功', '部分匹配', '匹配异常']
        },
        xAxis: {
          type: 'category',
          data: months
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '匹配成功',
            type: 'line',
            data: successData,
            itemStyle: {
              color: '#67C23A'
            }
          },
          {
            name: '部分匹配',
            type: 'line',
            data: partialData,
            itemStyle: {
              color: '#E6A23C'
            }
          },
          {
            name: '匹配异常',
            type: 'line',
            data: exceptionData,
            itemStyle: {
              color: '#F56C6C'
            }
          }
        ]
      };

      trendChart.setOption(option);
    }
  } catch (error) {
    console.error('加载匹配趋势数据失败', error);
    ElMessage.error('加载匹配趋势数据失败');
  }
};

// 窗口大小变化时重新调整图表大小
const handleResize = () => {
  trendChart?.resize();
};

onMounted(() => {
  loadStatistics();

  // 使用nextTick确保DOM已经渲染
  setTimeout(() => {
    initTrendChart();
    window.addEventListener('resize', handleResize);
  }, 100);
});

</script>

<style scoped>
.match-statistics-panel {
  padding: 20px 0;
}

.stat-card {
  height: 120px;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.stat-icon {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 48px;
  opacity: 0.2;
}

.chart-row {
  margin-top: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

.chart-container {
  height: 300px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 